<template>
	
	<view>
		<view class="content">
			
			<view class="c-item" v-for="(item,index) in foods" @tap="go_food_page(item)" data-url="/pages/my/food_detail?title=">
				<view class="ci-container" :class="index % 2 == 0 ? 'green' : ''">
					<view class="cic-box">
						<view class="cicc-title">{{item.title}}</view>
						<view class="cicc-image">
							<image :src="item.img_url"></image>
						</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
	
</template>

<script>
	
	export default {
		data(){
			return {
				foods:[]
			}
		},
		onLoad() {
			let that = this;
			that.initFoods();
		},
		methods:{
			go_food_page(item){
				uni.navigateTo({
					url:'/pagesExt/my/food_detail?bigTitle='+item.title+'&food_id='+item.id
				})
			},
			initFoods(){
				
				let that = this;
				
				
				var images = [
					'https://images.pexels.com/photos/13940670/pexels-photo-13940670.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
					'https://images.pexels.com/photos/18713030/pexels-photo-18713030.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
					'https://images.pexels.com/photos/18601973/pexels-photo-18601973/free-photo-of-m5-vsco.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'
				];/*
				var img_idx = 0;
				var _foods = [];
				for(var i=0;i<10;i++){
					_foods.push({
						title:'我是标题'+i,
						img_url:images[img_idx]
					});
					img_idx++;
					img_idx = img_idx > 2 ? 0 : img_idx
				}
				*/
				var _foods = [
					{id:1,title:'标题1',img_url:'图片地址1'},
					{id:2,title:'标题2',img_url:'图片地址2'},
					{id:3,title:'标题3',img_url:'图片地址3'},
					{id:4,title:'标题4',img_url:'图片地址4'}
					//继续添加
				]
				
				that.foods = _foods;
				
			}
		}
	}
	
</script>

<style>
	
	.ci-container{
		height: 4rem;
		width: 100%;
		position: relative;
		background-color: gray;
		border-radius: 0.35rem;
		margin-bottom: 0.5rem;
	}
	
	.ci-container.green{
		background-color: #55ff7f;
	}
	
	.cic-box{
		height: 4rem;
		width: 98%;
		position: relative;
		background-color: white;
		border-radius: 0.35rem;
		float: right;
		display: flex;
	}
	
	.cicc-title{
		width: 100%;
		height: 4rem;
		line-height: 4rem;
		font-size: 1.0rem;
		padding-left: 0.5rem;
	}
	
	.cicc-image{
		width: 3.5rem;
		height: 3.5rem;
		margin-top: 0.25rem;
		margin-right: 0.35rem;
		flex-shrink: 0;
	}
	
	.cicc-image image{
		height: 100%;
		width: 100%;
		border-radius: 0.35rem;
	}
	
	
</style>